Skip to content

Fix code copy button covering code annotation marker - #15136

Merged
cderv merged 4 commits into
mainfrom
fix/issue-13444
Oct 22, 2026
Merged

cderv merged 4 commits into
mainfrom
fix/issue-13444

Conversation

@cderv

@cderv cderv commented Oct 21, 2026

Copy link
Copy Markdown
Member

Since #13024 wrapped the code copy button in div.code-copy-outer-scaffold (first released in v1.8.15), the button no longer sits inside the pre.
The rule that moved it clear of the annotation gutter, .code-annotated .code-copy-button, still targets a descendant of pre.code-annotated, so it matches nothing.
On an annotated block the button lands on top of the marker on the first line, and the annotation can no longer be opened by hover or click.

Fix

The selector now follows the scaffold: .code-copy-outer-scaffold:has(pre.code-annotated) > .code-copy-button.
The scaffold itself stays, as it is what keeps the button from scrolling with the code and lets line numbers work (#13009, #5538).
The rule is based on the one suggested in the issue thread.

The old 1.25em margin worked in 1.7 because the button sat inside the pre and inherited the code font size.
The button now has the body font size, while the gutter is calc(20px + 0.5em) in the code font size.
The rule therefore sets font-size: $code-block-font-size on the button, so margin-right: calc(20px + 0.5em + 5px) is the gutter width plus the button's usual 5px for any theme font size.
It is written with em rather than 0.5 * $code-block-font-size, because a percentage value such as 75% would resolve against the container width inside margin and push the button far into the code.

Annotated blocks inside callouts are still wrong, which is separate and tracked in #13446.
No backport is planned: the regression is from v1.8.15 and the stable release is v1.10.

Fixes #13444

Checklist

I have (if applicable):

  • referenced the GitHub issue this PR closes
  • updated the appropriate changelog in the PR
  • ensured the present test suite passes
  • added new tests
  • created a separate documentation PR in Quarto's website repo and linked it to this PR
AI-assisted PR
  • AI tool used: Claude Code
  • Codebase grounding: local clone, DeepWiki MCP
  • Human review: I have reviewed, tested, and verified the AI-generated content before submitting.

Note: autonomous AI agents submitting PRs without human oversight are not permitted — see the Code of Conduct.

cderv added 4 commits October 21, 2026 16:55
Since the code-copy scaffold moved the copy button out of the pre,
the rule that shifted it clear of the annotation gutter no longer
matches, so the button sits on top of the marker and swallows its
hover. The test checks that the marker is the element under its own
center and that the annotation tooltip opens. It fails in chromium,
firefox and webkit until the CSS is fixed.

Refs #13444
Since the copy button moved out of the pre into the outer scaffold, the
rule that shifted it left of the annotation gutter matched nothing, so
the button sat on top of the marker of an annotated first line and
swallowed its hover or click. The scaffold stays: it keeps the button
from scrolling with the code while line numbers need visible overflow.

The rule now targets the button through the scaffold that holds an
annotated pre. Its margin can no longer be 1.25em: that relied on the
button inheriting the code font size, and as a sibling of div.sourceCode
its em is now the body size. The margin is the gutter width,
calc(20px + 0.5em) in code font size, rewritten as 0.5 times
$code-block-font-size so it holds when a theme changes that size, plus
the default 5px. The button and the pre resolve em from the same
parent, so the two stay in step.

The test now also covers select mode, a theme with a 0.75em code block
font size, and checks that the button of a block without annotations
keeps its default position.

Fixes #13444
The fix is not backported to v1.10, and on main the Regression fixes
section marks entries that are.
The margin multiplied $code-block-font-size inside calc(), which only
matches the gutter for length units. A percentage, which a theme or a
brand typography size can set, resolved against the scaffold width in
a margin, and pushed the button about 290px into the code.

The button now takes the code block font size itself, so it shares the
pre's em, and the margin repeats the gutter's own calc(20px + 0.5em)
plus 5px. That holds for any value the pre accepts. The copy icon is
sized in rem, so it keeps its size.
@posit-snyk-bot

posit-snyk-bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

✅ Snyk checks have passed. No issues have been found so far.

Status Scan Engine Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@cderv
cderv added this pull request to stack #15142 October 22, 2026 09:10
cderv added a commit that referenced this pull request Oct 22, 2026
Pull request runs check out the merge commit, so comparing absolute counts with the baseline blamed every open PR for an increase merged on main by another PR (#15136 after #15134). With --against HEAD^1 the PR is compared with the base branch tip and judged only on its own change; push runs keep the absolute baseline gate.

gitChanges reads NUL-delimited git output through execProcess, splits renames into delete + add and checks every git call. --accept-increase replaces --accept-tests-increase and accepts any scope, since an uncovered increase in src needs a bump too.

The new tests are characterisation tests of new functions: their first run failed at module load, which is not a RED step.
@cderv
cderv merged commit b74bec2 into main Oct 22, 2026
91 of 94 checks passed
@cderv
cderv deleted the fix/issue-13444 branch October 22, 2026 14:08
cderv added a commit that referenced this pull request Oct 22, 2026
Pull request runs now compare against the base branch, so a PR is judged
on its own change. Comparing absolute counts blamed every open PR for an
increase merged to main by another PR (#15136 after #15134). The check
nets increases out per Deno API and per std module before any file is
blamed, so a renamed file or a moved call is not a finding.

An increase is an error only for a Deno API that src/deno_ral covers
equivalently (build.os and build.arch, in scopes that can import it).
Every other increase is a warning on the added line, and the job
summary gives the per-scope delta and the baseline bump a maintainer
accepts with --accept-increase. Std imports get only a suggested
replacement, since a name check cannot show that a wrapper exports what
the file uses. Pushes to main and manual runs keep the absolute baseline
gate.

- Delta mode reads the baseline committed at the base revision. A PR
  that adds nothing while main is above baseline gets only a notice.
- Delta mode lists the whole base tree rather than passing every changed
  path to git, which keeps long comparisons under the Windows
  command-line limit.
- Counts use a prototype-free dictionary, so an identifier such as
  constructor is an ordinary key.
- src/core/lib is browser-shared and cannot import src/deno_ral, so an
  increase there is a warning, not an error.

Related to #15134, #15135 and #15136.
cderv added a commit that referenced this pull request Oct 22, 2026
A code block that starts or ends a callout had its copy button above
the code frame, with more space than a paragraph at the same edge.
Since #13024 wrapped code blocks in a scaffold element, the callout edge
rules applied to the scaffold instead of the code. At a callout edge the
scaffold now takes its spacing as margin, so the button sits inside the
code frame and the code gets the same gap as a paragraph.

- Use margin instead of padding for code at a callout edge, including
 cells whose edge child is code
- Exclude the copy button from the callout last-child spacing rule
- Hit-test annotated code block markers in callouts (#13444), which
 needs #15136 merged first
- Titled callouts now leave a gap between the header and the code
 frame, unlike the flush layout in 1.7

See #13238 for the broader padding-to-margin change, which this does
not include, and #15137 for the same offset in column-grid sections.

Fixes #13446
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Code-copy button overlaps with code-annotation marker

2 participants